<template>
	<div>
		<!-- 头部 -->
		<div class="lunbotu">
			<!-- 轮播图 -->
			<div>
			<template>
			  <el-carousel :interval="4000" type="card" height="350px">
			    <el-carousel-item v-for="lbt in pList" :key="lbt">
			      <el-link type="success" @click="zhichi(lbt.pid)">
			       <el-image
			            style="width: 100%; "
			            :src="'http://localhost:8080/vueload?filename='+lbt.img"
			            :fit="'scale-down'"></el-image>
			      </el-link>				 
			    </el-carousel-item>
			  </el-carousel>
			</template>
			</div>	
		</div>
		
		<!-- 中间 -->
		<!-- 主体内容-->
		<div class="main_height">
			<el-row>
			  <el-col :span="6" v-for="(o, index) in C" :key="o" :offset="index > 0 ? 2 : 0">
			    <el-card :body-style="{ padding: '0px' }" style="width: 130%;">
			      <el-image
			           style="width: 100%;"
			           :src="'http://localhost:8080/vueload?filename='+o.projectTouImg"
			           :fit="cover"></el-image>
			      <div style="padding: 14px;">				
			        <span style="text-align: center;display:block;">{{o.projectName}}</span>
					<p style="text-align: center;display:block;">{{o.projectMessage}}</p>
			        
					<div style="width: 100%;height: 60px;border-top:#D1C2D8 1px solid;">
			          <el-button type="success" plain style="display:block;margin:0 auto;position: relative;top: 20px;" @click="zhichi(o.projectId)">项目详情</el-button>
			        </div>
					
			      </div>
			    </el-card>
			  </el-col>
			</el-row>		
										  
							  
		</div>
		
		
		<div class="dibu1">
			
			<!-- 科技类 -->
			
			<div v-for="(fl,ke) in dfl" :key="fl">
				<div style="margin-left: 10px;">
					<el-link style="float: right;margin-top: 10px;" type="primary" @click="xmzl()">更多&nbsp;...</el-link>
				<p style="width: 100px;height: 30px;background-color: rgb(0,153,204);color: whitesmoke;text-align: center;">{{fl.bigName}}类</p>
				<div style="width: 100%;border-bottom: rgb(0,153,204) 5px solid;position: relative;bottom: 15px;"></div>
				</div>
			<el-row>			
			  <el-col :span="4" v-for="(o, index) in projects[ke]" :key="o" :offset="index > 0 ? 2 : 0">
			    
				<el-card :body-style="{ padding: '0px' }" style="width: 140%;margin-left: 10px;">
			    
				<div style="border: #D1C2D8 solid 1px;border-radius: 8px;">
					<div style="margin: 5px;">
				 <el-link @click="zhichi(o.projectId)"  type="success">
			     <el-image
			          style="width: 100%;height: 200px;"
			          :src="'http://localhost:8080/vueload?filename='+o.projectTouImg"
			          :fit="cover"></el-image>
			     </el-link>
			     <div style="padding: 14px;">
			       <span>{{o.projectName}}</span>
						<div>
						 <p style="float: left;" class="el-icon-user-solid">{{o.peoples}}</p>
						 <p style="float: right;" class="el-icon-date">{{o.projectEndTime}}</p>
						 </div>
						 <el-progress :percentage="o.percentage/100" :format="format"></el-progress>
						<p style="display: inline;">￥总金额：<p style="display: inline;color: indianred;">￥{{o.projectAllMoney}}</p></p>					
			     </div>
				 </div>
				 </div>
			    </el-card>
			  </el-col>
			</el-row>		
			</div>		
					  
		</div>		

			
		
	</div>
</template>

<script>
	export default {
	  data(){
		  return {
			pList:[],
			plist1:['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
			'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
			'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
			'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',],
			url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
			C:[],	  
			dfl:[],
			projects:[]			
		  };
	  },
		methods: {
			// 查询大分类
			async selectDfl(){
					var res = await this.$http.post('/selectAllBigType')							
					if(res.data.code=200){				 				 
						this.dfl = res.data.data
						var param = new URLSearchParams();
						for(var i = 0;i < this.dfl.length;i++){
							param.append('bigId',this.dfl[i].bigId)
							var res1 = await this.$http.get('/selectAllProByBigId?bigId='+this.dfl[i].bigId)			
							if(res1.data.code==200){
								this.projects.push(res1.data.data);
								// console.log(this.projects)
							}
							
						}																	 
					}
					// alert(this.project[0].projectAllMoney)
			},
			
			// 项目展示
			async zhichi(val) {
				var token = window.sessionStorage.getItem("token");
				
					var param = new URLSearchParams();
					param.append("projectId",val);
					var res = await this.$http.post('/selectProjectByProjectId',param);
					
					// alert(res.data.data)
					if(res.data.code==200){		
						window.sessionStorage.setItem('projectId',val)
						if(token!=null){
							this.$router.push('/zhichi')
						}else{
							this.$message.error('请先去登录!')
						}
					}else{
						this.$message.error('此项目已下线或已结束!')
					}
				
			},
			// 项目总览
			xmzl(){
				this.$router.push('/xmzl') 
			},
			// 进度条
			format(percentage) {
				return percentage === 100 ? '筹满' : `${percentage}%`;
			},
			// 欢迎
			welcome() {
				this.$router.push('/welcome')
			},
			// 查询轮播图
			async queryLbt(){			
						  var res = await this.$http.post('/selectAllLbt')
						  
						  // this.userlist = res.data.list
						  // this.total = res.data.total
						  if(res.data.code=200){
							  // console.log(res.data.data)
							 this.pList = res.data.data
							 
						  }else{
							  this.pList = this.plist1;
						  }
						  						  
			 },
			 // 查询c位展示图片
			 async selectC(){
				 var res = await this.$http.post('/selectThreeByTime')							
				 if(res.data.code=200){				 				 
				 	this.C = res.data.data				 							 
				 }
			 }
		 
		},
		mounted() {
			this.$parent.zs()
			this.queryLbt();
			this.selectC();
			this.selectDfl();
			// this.selectProByDfl()
		}
	}
</script>

<style>
	.el-carousel__item h3 {
	    color: #475669;
	    font-size: 14px;
	    opacity: 0.75;
	    line-height: 200px;
	    margin: 0;
	  }
	  
	  .el-carousel__item:nth-child(2n) {
	    background-color: #99a9bf;
	  }
	  
	  .el-carousel__item:nth-child(2n+1) {
	    background-color: #d3dce6;
	  }
	.lunbotu {
		width: 110%;
		height: 400px;
		position: relative;
		right: 115px;
		margin-top: 50px;
		margin-left: 50PX;
		border-bottom: #D1C2D8 1px solid;
	}
	/* 中间 */
	.main_height {
		width: 100%;
		height: 550px;
		margin-top: 50px;
		margin-left: 50px;
		position: relative;
		right: 50px;
		border-bottom: #D1C2D8 solid 1px;
	}
	
	/* c位展示 */
	.time {
	    font-size: 13px;
	    color: #999;
	  }
	  
	  .bottom {
	    margin-top: 13px;
	    line-height: 12px;
	  }
	
	  .button {
	    padding: 0;
	    float: right;
	  }
	
	  .image {
	    width: 100%;
	    display: block;
	  }
	
	  .clearfix:before,
	  .clearfix:after {
	      display: table;
	      content: "";
	  }
	  
	  .clearfix:after {
	      clear: both
	  }
	  
	/* 底部 */	
	.dibu1{
		width: 100%;
		margin-top: 50px;
		margin-left: 50px;
		position: relative;
		right: 50px;		
	}
</style>
